<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城管理 - 甜呦商城</title>
    <link rel="stylesheet" href="css/admin.css">
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <h1>甜呦商城管理</h1>
        </div>
        <div class="user-actions">
            <a href="javascript:void(0)" id="logoutBtn" class="btn btn-logout">注销</a>
        </div>
    </div>
</header>

<div class="container">
    <div class="admin-sidebar">
        <ul>
            <li><a href="javascript:void(0)" class="active" id="productManagement">商品管理</a></li>
            <li><a href="javascript:void(0)" id="messageManagement">买家留言</a></li>
        </ul>
    </div>

    <div class="admin-content">
        <div id="productManagementContent" class="admin-section">
            <h2>商品管理</h2>
            <div class="product-actions">
                <button id="addProductBtn" class="btn-add">添加商品</button>
            </div>
            <div class="product-list" id="productList">
                <!-- 商品列表将通过JavaScript动态添加 -->
            </div>
        </div>

        <div id="messageManagementContent" class="admin-section hidden">
            <h2>买家留言</h2>
            <div class="message-list" id="messageList">
                <!-- 留言列表将通过JavaScript动态添加 -->
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="container">
        <p>&copy; 2025 甜呦商城 版权所有</p>
    </div>
</footer>

<!-- 添加商品模态框 -->
<div id="addProductModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加商品</h2>
        <form id="addProductForm">
            <div class="form-group">
                <label for="productName">商品名称</label>
                <input type="text" id="productName" name="name" required>
            </div>
            <div class="form-group">
                <label for="productPrice">价格</label>
                <input type="number" id="productPrice" name="price" step="0.01" required>
            </div>
            <div class="form-group">
                <label for="productStock">库存</label>
                <input type="number" id="productStock" name="stock" required>
            </div>
            <div class="form-group">
                <label for="productCategory">分类</label>
                <select id="productCategory" name="category">
                    <!-- 分类选项将通过JavaScript动态添加 -->
                </select>
            </div>
            <div class="form-group">
                <label for="productImage">商品图片</label>
                <input type="file" id="productImage" name="image" accept="image/*" required>
            </div>
            <div class="form-group">
                <label for="productDescription">描述</label>
                <textarea id="productDescription" name="description" required></textarea>
            </div>
            <button type="submit" class="btn-save">保存</button>
        </form>
    </div>
</div>

<!-- 编辑商品模态框 -->
<div id="editProductModal" class="modal hidden">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>编辑商品</h2>
        <form id="editProductForm">
            <input type="hidden" id="editProductId" name="id">
            <div class="form-group">
                <label for="editProductName">商品名称</label>
                <input type="text" id="editProductName" name="name" required>
            </div>
            <div class="form-group">
                <label for="editProductPrice">价格</label>
                <input type="number" id="editProductPrice" name="price" step="0.01" required>
            </div>
            <div class="form-group">
                <label for="editProductStock">库存</label>
                <input type="number" id="editProductStock" name="stock" required>
            </div>
            <div class="form-group">
                <label for="editProductCategory">分类</label>
                <select id="editProductCategory" name="category">
                    <!-- 分类选项将通过JavaScript动态添加 -->
                </select>
            </div>
            <div class="form-group">
                <label for="editProductImage">商品图片</label>
                <input type="file" id="editProductImage" name="image" accept="image/*">
            </div>
            <div class="form-group">
                <label for="editProductDescription">描述</label>
                <textarea id="editProductDescription" name="description" required></textarea>
            </div>
            <button type="submit" class="btn-save">保存</button>
        </form>
    </div>
</div>

<script src="js/admin.js"></script>
</body>
</html>